<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<!-- <navbar :fixed="true" :bgColor="'#fff'" :title="'订单详情'" :leftIcon="true"></navbar> -->

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text>加载中...</text>
		</view>

		<!-- 订单详情卡片 -->
		<view v-else class="order-card">
			<!-- 订单号和复制按钮 -->
			<view class="order-header">
				<text class="order-number">订单号：{{ orderDetail.orderId }}</text>
				<image src="/static/icon/copy-icon.svg" mode="aspectFit" @click="copyOrderNumber"></image>
			</view>

			<!-- 产品名称和状态 -->
			<view class="product-info">
				<text class="product-name">{{ orderDetail.productName }}</text>
				<view class="status-tag" :class="'status-' + orderDetail.status">{{ orderDetail.statusLabel }}</view>
			</view>

			<!-- 订单详情信息 -->
			<view class="order-details">
				<view class="detail-row">
					<text class="label">购买金额：</text>
					<text class="value">{{ orderDetail.amount }}</text>
				</view>
				<view class="detail-row">
					<text class="label">周期：</text>
					<text class="value">{{ orderDetail.cycle }}天</text>
				</view>
				<view class="detail-row">
					<text class="label">利率：</text>
					<text class="value profit">{{ orderDetail.rate }}%</text>
				</view>
				<view class="detail-row">
					<text class="label">到期收益：</text>
					<text class="value profit">+{{ orderDetail.totalProfit }}</text>
				</view>
				<view class="detail-row">
					<text class="label">创建时间：</text>
					<text class="value-time">{{ orderDetail.createTime }}</text>
				</view>
				<view class="detail-row">
					<text class="label">结束时间：</text>
					<text class="value-time">{{ orderDetail.endTime }}</text>
				</view>
			</view>
		</view>

		<!-- 继续下单按钮 -->
		<view class="continue-btn" @click="continueOrder">
			继续下单
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { TokenManager } from '@/utils/token.js';
	import { optionApi } from '@/utils/api';
	
	const {
		t,
		locale
	} = useI18n();

	// 加载状态
	const loading = ref(false);
	
	// 订单ID（从路由参数获取）
	const orderId = ref('');
	
	// 订单详情数据
	const orderDetail = ref({
		orderId: '',
		productName: '',
		amount: '0',
		cycle: '0',
		rate: '0',
		totalProfit: '0',
		createTime: '',
		endTime: '',
		status: 1,
		statusLabel: '进行中',
		productId: ''
	});

	// 获取订单详情
	const getOrderDetail = async () => {
		if (!orderId.value) {
			uni.showToast({
				title: '订单ID不能为空',
				icon: 'none'
			});
			return;
		}

		loading.value = true;
		try {
			// 调用获取订单详情接口
		const authHeader = TokenManager.getAuthorizationHeader();
		console.log('订单详情页Token调试信息:', {
			accessToken: TokenManager.getAccessToken(),
			authHeader: authHeader,
			orderId: orderId.value
		});
		
		if (!authHeader) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			return;
		}
		
		const response = await uni.request({
			url: '/app-api/invest/pledge-order/get',
			method: 'GET',
			header: {
				'Content-Type': 'application/json',
				'Authorization': authHeader
			},
			data: {
				id: orderId.value
			}
		});
			
			if (response.data.code === 0 && response.data.data) {
				// 更新订单详情数据
				const data = response.data.data;
				
				// 格式化时间
				const formatTime = (timestamp) => {
					if (!timestamp) return '';
					const date = new Date(timestamp);
					return date.toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit',
						second: '2-digit'
					}).replace(/\//g, '/').replace(',', ' ');
				};
				
				orderDetail.value = {
					orderId: data.orderId || data.id || '',
					productName: data.productName || 'Pancake...',
					amount: data.amount || '0',
					cycle: data.cycle || '1',
					rate: data.rate || '1.3',
					totalProfit: data.totalProfit || '0',
					createTime: formatTime(data.createTime),
					endTime: formatTime(data.endTime),
					status: data.status || 1,
					statusLabel: data.statusLabel || '进行中',
					productId: data.productId || ''
				};
			} else {
				uni.showToast({
					title: response.data.msg || '获取订单详情失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 复制订单号
	const copyOrderNumber = () => {
		uni.setClipboardData({
			data: orderDetail.value.orderId,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});
	};

	// 继续下单
	const continueOrder = () => {
		// 检查是否有产品ID
		if (orderDetail.value.productId) {
			// 跳转到量化产品详情页面，传递产品ID
			uni.navigateTo({
				url: `/pages/quantify/details?id=${orderDetail.value.productId}`
			});
		} else {
			// 如果没有产品ID，显示提示信息
			uni.showToast({
				title: '产品信息不完整，无法继续下单',
				icon: 'none'
			});
		}
	};

	// 页面加载时获取订单详情
	onMounted(() => {
		// 获取路由参数中的订单ID
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const options = currentPage.options;
		
		if (options && options.id) {
			orderId.value = options.id;
			getOrderDetail();
		} else {
			uni.showToast({
				title: '缺少订单ID参数',
				icon: 'none'
			});
		}
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 69.77rpx 34.89rpx;
		box-sizing: border-box;
	}

	// 加载状态
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		
		text {
			font-size: 28rpx;
			color: #666;
		}
	}

	// 订单详情卡片
	.order-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;

		// 订单号和复制按钮
		.order-header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;

			.order-number {
				font-size: 24rpx;
				font-weight: 300;
				color: rgba(0, 0, 0, 1);
				margin-right: 20rpx;
			}

			image {
				width: 22rpx;
				height: 22rpx;
			}
		}

		// 产品名称和状态
		.product-info {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;

			.product-name {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
			}

			.status-tag {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
				
				&.status-1 {
					background-color: rgba(13, 179, 100, 0.1);
					color: rgba(13, 179, 100, 1);
				}
				
				&.status-2 {
					background-color: rgba(247, 56, 79, 0.1);
					color: rgba(247, 56, 79, 1);
				}
			}
		}

		// 订单详情信息
		.order-details {
			.detail-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 0 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					font-size: 28rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
				}

				.value {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);

					&.profit {
						color: rgba(13, 179, 100, 1);
					}

					&.loss {
						color: rgba(247, 56, 79, 1);
					}
				}

				.value-time {
					font-size: 24rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}

	// 继续下单按钮
	.continue-btn {
		// width: 570.38rpx;
		height: 97.68rpx;
		opacity: 1;
		border-radius: 26.16rpx;
		background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
		font-size: 31.4rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 97.68rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin: 457rpx 90.7rpx 0 90.7rpx;
	}
</style>